import React, { FC, useMemo } from "react";

interface SvgIconProps {
  name: string;
  color?: string;
  size?: number;
  profix?: string;
}

const defaultSize = 16;
const defaultColor = "#212121";

const SvgIcon: FC<SvgIconProps> = (props) => {
  const {
    size = defaultSize,
    color = defaultColor,
    profix = "icon",
    name,
  } = props;

  const iconSize = size + "px";
  const iconName = useMemo(() => {
    return `#${profix}-${name}`;
  }, [profix, name]);

  return (
    <svg style={{ height: iconSize, width: iconSize }}>
      <use href={iconName} fill={color} />
    </svg>
  );
};

export default React.memo(SvgIcon);
